<script setup>
import Role from './Role.vue'
import BriefcaseIcon from './icons/BriefcaseIcon.vue'
import ArrowDownIcon from './icons/ArrowDownIcon.vue'
import Button from './Button.vue'

const roles = [
  {
    company: 'Spotlight',
    title: '创始人 & CEO',
    startLabel: '2019',
    startDate: '2019',
    endLabel: '至今',
    endDate: new Date().getFullYear().toString()
  },
  {
    company: '字节跳动',
    title: '产品设计总监',
    startLabel: '2016',
    startDate: '2016',
    endLabel: '2019',
    endDate: '2019'
  },
  {
    company: '腾讯',
    title: '高级前端工程师',
    startLabel: '2013',
    startDate: '2013',
    endLabel: '2016',
    endDate: '2016'
  },
  {
    company: '阿里巴巴',
    title: '软件工程师',
    startLabel: '2010',
    startDate: '2010',
    endLabel: '2013',
    endDate: '2013'
  }
]
</script>

<template>
  <div class="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40">
    <h2 class="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
      <BriefcaseIcon class="h-6 w-6 flex-none" />
      <span class="ml-3">工作经历</span>
    </h2>
    <ol class="mt-6 space-y-4">
      <Role
        v-for="(role, index) in roles"
        :key="index"
        :role="role"
      />
    </ol>
    <Button href="#" variant="secondary" class="group mt-6 w-full">
      下载简历
      <ArrowDownIcon class="h-4 w-4 stroke-zinc-400 transition group-active:stroke-zinc-600 dark:group-hover:stroke-zinc-50 dark:group-active:stroke-zinc-50" />
    </Button>
  </div>
</template>
